<template>
  <div class="dialog">
    <el-dialog :title="dialog.title" :visible.sync="dialog.show" :close-on-click-modal="false"
      :close-on-press-escape="false" :modal-append-to-body="false">

      <div class="form">
        <el-form ref="form" :model="formData" :rules="form_rules" label-width="120px" style="margin:10px;width:auto">
          <el-form-item label="收支类型：">
            <el-select v-model="formData.type" placeholder="收支类型">
              <el-option v-for="(formtype, index) in format_type_list" :key="index" :label="formtype" :value="formtype">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="description" label="收支描述">
            <el-input type="description" v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item prop="income" label="收入">
            <el-input type="income" v-model="formData.income"></el-input>
          </el-form-item>
          <el-form-item prop="expenditure" label="支出">
            <el-input type="expenditure" v-model="formData.expenditure"></el-input>
          </el-form-item>
          <el-form-item prop="account" label="收账户余额">
            <el-input type="account" v-model="formData.account"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input type="remark" v-model="formData.remark"></el-input>
          </el-form-item>

          <el-form-item class="test_right">
            <el-button @click="dialog.show = false">取消</el-button>
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Dialog',
  data() {
    return {

      format_type_list: [
        "提现",
        "提现手续费",
        "充值",
        "优惠券",
        "充值礼券",
        "转账"
      ],
      form_rules: {
        description: {
          required: true, message: "收支描述不能为空", trigger: "blur"
        },
        income: {
          required: true, message: "收入不能为空", trigger: "blur"
        },
        expenditure: {
          required: true, message: "支出不能为空", trigger: "blur"
        },
        account: {
          required: true, message: "账户不能为空", trigger: "blur"
        },
      },
    }
  },
  props: {
    dialog: Object,
    formData: Object
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          // console.log(this.formData.id)
          const url = this.dialog.option == "add" ? "add" : `edit/${this.formData.id}`
          this.$axios.post(`/api/funds/${url}`, this.formData)
            .then(res => {
              if (this.dialog.option == "edit") {
                this.$message({ message: "数据更新成功", type: "success" });
              } else {

                // 添加成功
                this.$message({ message: "数据添加成功", type: "success" });

              }

            });
          this.dialog.show = false;
          this.$emit('update');
          // .catch(err=>{})
        }
      });
    },
  }
}
</script>
<style scoped>

</style>